<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        form {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="radio"],
        input[type="checkbox"],
        input[type="file"],
        select {
            margin-bottom: 15px;
        }
    </style>
</head>

<body>

    <form action="/biaodan" method="post" enctype="multipart/form-data">
        <label for="nickname">昵称：</label>
        <input type="text" id="nickname" name="nickname" required><br>

        <label for="gender">性别：</label>
        <input type="radio" id="male" name="gender" value="male"> 男
        <input type="radio" id="female" name="gender" value="female"> 女<br>

        <label for="hobby">爱好：</label>
        <input type="checkbox" id="reading" name="hobby" value="reading"> 阅读
        <input type="checkbox" id="sports" name="hobby" value="sports"> 运动
        <input type="checkbox" id="music" name="hobby" value="music"><br>

        <label for="avatar">头像：</label>
        <input type="file" id="avatar" name="avatar" required><br>

        <label for="province">省份：</label>
        <select id="province" name="province" onchange="updateCities(this.value)">
            <option value="">请选择</option>
        </select>

        <label for="city">城市：</label>
        <select id="city" name="city" onchange="updateDistricts(this.value)">
            <option value="">请选择</option>
        </select>

        <label for="district">区县：</label>
        <select id="district" name="district">
            <option value="">请选择</option>
        </select><br>

        <input type="submit">提交
    </form>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        // 三级联动数据
        const Data = {
            "河南": {
                "郑州": ["中原区", "二七区", "管城回族区"],
                "洛阳": ["老城区", "西工区", "涧西区"]
            },
            "山东": {
                "济南": ["历下区", "市中区", "槐荫区"],
                "青岛": ["市南区", "市北区", "黄岛区"]
            }
        };

        // 省
        const sheng = document.getElementById('province');
        for (let province in Data) {
            let option = document.createElement('option');
            option.value = province;
            option.text = province;
            sheng.appendChild(option);
        }

        // 市
        function updateCities(province) {
            const shi = document.getElementById('city');
            shi.innerHTML = '<option value="">请选择</option>';
            if (Data[province]) {
                for (let city in Data[province]) {
                    let option = document.createElement('option');
                    option.value = city;
                    option.text = city;
                    shi.appendChild(option);
                }
            }
        }

        // 区县
        function updateDistricts(city) {
            const qu = document.getElementById('district');
            qu.innerHTML = '<option value="">请选择</option>';
            for (let province in Data) {
                if (Data[province][city]) {
                    Data[province][city].forEach(district => {
                        let option = document.createElement('option');
                        option.value = district;
                        option.text = district;
                        qu.appendChild(option);
                    });
                    break;
                }
            }
        }
        $('form').on('submit', function (event) {
            event.preventDefault();
            let formData = new FormData();
            $.ajax({
                url: "http://localhost:3001/biaodan",
                type: 'post',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    console.log('提交成功:', response);
                    alert('提交成功！');
                },
                error: function (error) {
                    console.error('提交失败:', error);
                    alert('提交失败，请稍后重试！');
                }
            });
        });

    </script>
</body>

</html>